<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>标题</title> 
<link href="./css/ionic.css" rel="stylesheet"> 
<script src="./js/ionic.bundle.min.js"></script>
</head>
 <body ng-app="starter">
    <ion-nav-view></ion-nav-view>

    <script id="menu.html" type="text/ng-template">        
	    <ion-side-menus>
			<ion-pane ion-side-menu-content>
				<ion-nav-bar class="bar-stable nav-title-slide-ios7">
					<ion-nav-back-button class="button-clear">
						<i class="icon ion-chevron-left"></i> Back
					</ion-nav-back-button>
				</ion-nav-bar>
				<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
			</ion-pane>
			<ion-side-menu side="left">
		        <header class="bar bar-header bar-stable">
					<h1 class="title">Left</h1>
		        </header>
				<ion-content class="has-header">
					<ion-list>
						<ion-item nav-clear menu-close href="#/app/search">Search</ion-item>
						<ion-item nav-clear menu-close href="#/app/browse">Browse</ion-item>
						<ion-item nav-clear menu-close href="#/app/playlists">Playlists</ion-item>
					</ion-list>
				</ion-content>
			</ion-side-menu>
	    </ion-side-menus>      
    </script>

    <script id="playlists.html" type="text/ng-template">
	    <ion-view title="Playlists">
			<ion-nav-buttons side="left">
				<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
			</ion-nav-buttons>
	    	<ion-tabs class="tabs-positive tabs-icon-only">
		        <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" class="has-header">
		          	<!-- Tab 1 content -->
					<ion-content>
						<ion-list>
							<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
								{{playlist.title}}
							</ion-item>
						</ion-list>
					</ion-content>
		        </ion-tab>
		        <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
		         	<!-- Tab 2 content -->
		         	<ion-content><h1>About</h1></ion-content>
		        </ion-tab>
	        	<ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
	          		<!-- Tab 3 content -->
	          		<ion-content><h1>Settings</h1></ion-content>
	        	</ion-tab>
	    	</ion-tabs>
	    </ion-view>  
    </script>
</body>
<script type="text/javascript">    
var myApp = angular.module("starter",['ionic']);
myApp.run(function($ionicPlatform){
	$ionicPlatform.ready(function(){
		if(window.cordova && window.cordova.plugins.Keyboard) {
			cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
		}
		if(window.StatusBar){
			StatusBar.styleDefault();
		}
	});
});
myApp.config(function($stateProvider, $urlRouterProvider) {
	$stateProvider
	.state('app', {
		url: "/app",
		abstract: true,
		templateUrl: "menu.html",
		controller: 'AppCtrl'
	})
	.state('app.playlists', {
		url: "/playlists",
		views: {
			'menuContent' :{
				templateUrl: "playlists.html",
				controller: 'PlaylistsCtrl'
			}
		}
	})
	$urlRouterProvider.otherwise('/app/playlists');
});
myApp.controller('AppCtrl', function($scope) {});
myApp.controller('PlaylistsCtrl', function($scope) {
	console.log("PlaylistsCtrl");
	$scope.playlists = [
		{ title: 'Reggae', id: 1 },
		{ title: 'Chill', id: 2 },
		{ title: 'Dubstep', id: 3 },
		{ title: 'Indie', id: 4 },
		{ title: 'Rap', id: 5 },
		{ title: 'Cowbell', id: 6 }
	];
});
myApp.controller('PlaylistCtrl', function($scope, $stateParams){})
</script>
</html>